# Vista de contenido / Content switcher

### Código

```
<button></button>
```

### Tokens

#### Color

| Class                       | Property         | Color token      |
| :-------------------------- | :--------------- | :--------------- |
| `.bx--content-switcher-btn` | background-color | `$ui-background` |
| `.bx--content-switcher-btn` | text color       | `$text-02`       |
| `--selected`                | background-color | `$ui-05`         |
| `--selected`                | text color       | `$inverse-01`    |
| `:after`                    | divider          | `$ui-03`         |

#### Estados interactivos

| Class       | Property         | Color token    |
| :---------- | :--------------- | :------------- |
| `:hover`    | background-color | `$hover-ui`    |
| `:hover`    | text color       | `$text-01`     |
| `:focus`    | border           | `$focus`       |
| `:disabled` | background-color | `$disabled-01` |
| `:disabled` | text-color       | `$disabled-02` |

#### Estructura

| Class                       | Property                    | px   | Spacing token |
| :-------------------------- | :-------------------------- | :--- | :------------ |
| `.bx--content-switcher`     | height: default             | 40   | `–`           |
| `.bx--content-switcher`     | height: small               | 32   | `–`           |
| `.bx--content-switcher`     | height: large               | 48   | `–`           |
| `.bx--content-switcher`     | corner radius               | 4    | `–`           |
| `:after`                    | divider                     | 1    | `–`           |
| `.bx--content-switcher-btn` | padding-left, padding-right | 16   | `$spacing-05` |